<template>
    <div class="wrapper">
        <div  ref="bar">
            <top-bar class="search-container"
                     :title="title" rightButton=""></top-bar>
        </div>

        <div class="row" ref="select">
            <text @click="setMinsName('',0)"
                  :class="['text' , currentMinsIndex === 0 ? 'minsActive': '' ]">全部</text>
            <text v-for="(name,index) in minList" @click="setMinsName(name,index+1)"
                  :class="['text' , currentMinsIndex === index+1 ? 'minsActive': '' ]">{{name}}</text>
        </div>
        <book-list :listHeight="contentHeight" :bookList="bookList"
                   :loading="loading"
                   @onLoading="onloading">
        </book-list>
        <wxc-loading :show="isShow" ></wxc-loading>
    </div>
</template>
<style scoped>
    .row{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .minsActive{
        border-width: 2px;
        border-style: solid;
        border-color: #d81e06;
        color: #d81e06;
    }
    .text{
        padding: 20px;
    }
</style>

<script>
    import {WxcSlideNav, Utils, WxcLoading} from 'weex-ui';
    import  TopBar  from '../components/bar/TopBar';
    import  BookList  from '../components/search/BookList';
    import {sort_all_info, sort_book} from '../store/actions';
    import {All_SORT} from '../store/mutation-types';
    import {getCache, setCache} from '../util/storageUtils';
    import {getRealScreenHeight} from '../util/Config'


    export default {
        components: {WxcSlideNav, TopBar, BookList, WxcLoading},
        data() {
            return {
                items: new Array(50),
                title: '',
                rankId: '',
                mins: '',
                minList: [],
                allSortMessage: {},
                type: '',
                currentMinsIndex: 0,
                listHeight: 1344,
                bookList:[],
                loading:false,
                start: 1,
                limit: 10,
                total:0,
                isShow:false,
                refSelect:undefined,
                sail: 0,
                selectHeight: 0,
            }
        },
        created(){
            this.listHeight = getRealScreenHeight(Utils) - 90;
            this.title = this.$route.query.major || "玄幻";
            this.mins = this.$route.query.mins || "";
            this.type = this.$route.query.type || "male";
            let self = this;
            this.sail =  WXEnvironment.deviceWidth / 750;
            getCache(All_SORT).then(value => {
                if (value == null) {
                    sort_all_info({
                        callback: function (data) {
                            self.allSortMessage = data;
                            setCache(All_SORT, self.allSortMessage)
                        }
                    })
                } else {
                    self.allSortMessage = JSON.parse(value);
                }
                let temp = self.allSortMessage[self.type];
                let index = 0;
                let sortTemp;
                for (; index < temp.length; index++) {
                    sortTemp = temp[index];
                    console.log(sortTemp);
                    if (sortTemp.major === self.title) {
                        self.minList = sortTemp.mins;
                        break;
                    }
                }
            });
            this.firstGetBook();
        },
        mounted() {
            this.refSelect = this.$refs['select'];
            this.getSelectHeight();
        },
        computed:{
            isBookEnd() {
                return (this.start > parseInt(this.total / this.limit) + 1) || false;
            },
            contentHeight(){
                return this.listHeight - this.selectHeight - 90;
            }
        },
        methods: {
            getSelectHeight(){
                if(this.refSelect){
                    this.selectHeight = this.refSelect.offsetHeight * this.sail;
                }
            },
            firstGetBook(){
                this.start = 1;
                this.bookList = [];
                this.getBook();
            },
            getBook(){
                this.isShow=true;
                sort_book({
                    params: {
                        start: this.start,
                        limit: this.limit,
                        gender: this.type,
                        major: this.title,
                        minor: this.mins,
                    },
                    callback: (data) => {
                        let books = data.books || [];
                        if (books.length > 0) {
                            this.bookList.splice(this.bookList.length,0,...books)
                            // books.forEach(value => {
                            //     this.bookList.push(value);
                            // });
                        }
                        this.total = data.total || 0;
                        this.getSelectHeight();
                    },
                    after: () =>{
                        this.isShow=false;
                    }
                })
            },
            setMinsName(name, index){
                this.start = 1;
                this.currentMinsIndex = index;
                this.mins = name;
                this.firstGetBook();
            },
            onloading(){
                this.loading = !this.loading && !this.isBookEnd;
                console.log(this.loading);
                if (this.loading) {
                    console.log('loading', this.total);
                    if (!this.isBookEnd) {
                        this.start ++;
                        this.getBook();
                    }
                    this.loading = false;
                }
            },
            changDefaultCover(obj) {
                let index = obj.index;
                let temp = this.bookList[index];
                this.bookList[index] = temp;
                this.$set(this.bookList, index, temp);

            },
        }
    }
</script>